<template>
  <el-container class="admin-layout">
    <!-- 侧边栏 -->
    <el-aside width="240px" class="sidebar">
      <div class="logo-container">
        <div class="logo">
          <span class="logo-icon">🎨</span>
          <span class="logo-text">Art Design Pro</span>
        </div>
      </div>
      
      <el-menu
        class="sidebar-menu"
        :default-active="activeMenu"
        background-color="#001529"
        text-color="#ffffff"
        active-text-color="#1890ff"
        :unique-opened="true"
      >
        <el-menu-item index="dashboard" class="menu-item-active">
          <el-icon><Grid /></el-icon>
          <span>Dashboard</span>
        </el-menu-item>
        
        <el-sub-menu index="workspace">
          <template #title>
            <el-icon><Folder /></el-icon>
            <span>工作台</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="document">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>文档管理</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="user">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="menu">
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>菜单管理</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="result">
          <template #title>
            <el-icon><CircleCheck /></el-icon>
            <span>结果页面</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="group">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>组件中心</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="consumer">
          <template #title>
            <el-icon><ShoppingCart /></el-icon>
            <span>消费中心</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="details">
          <template #title>
            <el-icon><Files /></el-icon>
            <span>详情页面</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="settings">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="editor">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>运维管理</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="version">
          <template #title>
            <el-icon><Notebook /></el-icon>
            <span>版本计划</span>
          </template>
        </el-sub-menu>
        
        <el-sub-menu index="help">
          <template #title>
            <el-icon><QuestionFilled /></el-icon>
            <span>帮助中心</span>
          </template>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    
    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>监控中心</el-breadcrumb-item>
            <el-breadcrumb-item>工作台</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <el-input
            v-model="searchText"
            placeholder="搜索"
            class="search-input"
            prefix-icon="Search"
            size="small"
          />
          <el-button size="small" :icon="FullScreen" circle />
          <el-button size="small" :icon="Bell" circle />
          <el-button size="small" :icon="Setting" circle />
          <el-avatar :size="32" src="https://avatars.githubusercontent.com/u/1?v=4" />
        </div>
      </el-header>
      
      <!-- 主要内容 -->
      <el-main class="main-content">
        <!-- 数据卡片行 -->
        <el-row :gutter="16" class="stats-row">
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <div class="stat-title">总访问次数</div>
                  <div class="stat-value">9120</div>
                  <div class="stat-trend positive">+20%</div>
                </div>
                <div class="stat-icon blue">
                  <el-icon><TrendCharts /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <div class="stat-title">在线访客数</div>
                  <div class="stat-value">182</div>
                  <div class="stat-trend positive">+10%</div>
                </div>
                <div class="stat-icon cyan">
                  <el-icon><User /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <div class="stat-title">点击量</div>
                  <div class="stat-value">9520</div>
                  <div class="stat-trend negative">-12%</div>
                </div>
                <div class="stat-icon red">
                  <el-icon><Mouse /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-info">
                  <div class="stat-title">新用户</div>
                  <div class="stat-value">156</div>
                  <div class="stat-trend positive">+30%</div>
                </div>
                <div class="stat-icon purple">
                  <el-icon><UserFilled /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 图表区域 -->
        <el-row :gutter="16" class="chart-row">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card class="chart-card">
              <div class="chart-header">
                <h3>用户概述</h3>
                <div class="chart-subtitle">
                  比上期 <span class="positive">+23%</span>
                </div>
              </div>
              <div class="chart-content">
                <div ref="barChart" class="chart" style="height: 300px;"></div>
              </div>
              <div class="chart-stats">
                <div class="stat-item">
                  <div class="stat-label">总用户量</div>
                  <div class="stat-number">32k</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">总访问量</div>
                  <div class="stat-number">128k</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">日访问量</div>
                  <div class="stat-number">1.2k</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">周增长</div>
                  <div class="stat-number">+5%</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-card class="chart-card">
              <div class="chart-header">
                <h3>销售概述</h3>
                <div class="chart-subtitle">
                  今年增长 <span class="positive">+15%</span>
                </div>
              </div>
              <div class="chart-content">
                <div ref="lineChart" class="chart" style="height: 300px;"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 底部内容区 -->
        <el-row :gutter="16" class="bottom-row">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-card class="bottom-card">
              <div class="card-header">
                <h3>新用户</h3>
                <div class="card-subtitle">本个月增长 <span class="positive">+200%</span></div>
              </div>
              <div class="new-users-section">
                <el-button-group class="time-filter">
                  <el-button size="small" type="primary">本月</el-button>
                  <el-button size="small">上月</el-button>
                  <el-button size="small">今年</el-button>
                </el-button-group>
              </div>
              <div class="user-list">
                <div class="user-item" v-for="user in users" :key="user.id">
                  <el-avatar :size="40" :src="user.avatar" />
                  <div class="user-info">
                    <div class="user-name">{{ user.name }}</div>
                    <div class="user-location">{{ user.location }}</div>
                  </div>
                  <div class="user-stats">
                    <div class="user-gender">{{ user.gender }}</div>
                    <div class="user-age">{{ user.age }}</div>
                  </div>
                  <div class="user-progress">
                    <el-progress :percentage="user.progress" :color="user.progressColor" :show-text="false" />
                    <span class="progress-text">{{ user.progress }}%</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-card class="bottom-card">
              <div class="card-header">
                <h3>动态</h3>
                <div class="activity-count">新增 <span class="count">+6</span></div>
              </div>
              <div class="activity-list">
                <div class="activity-item" v-for="activity in activities" :key="activity.id">
                  <div class="activity-content">
                    <span class="activity-user">{{ activity.user }}</span>
                    <span class="activity-action">{{ activity.action }}</span>
                    <span class="activity-target" v-if="activity.target">{{ activity.target }}</span>
                  </div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-card class="bottom-card">
              <div class="card-header">
                <h3>代办事项</h3>
                <div class="todo-count">特别注意 <span class="count">+6</span></div>
              </div>
              <div class="todo-list">
                <div class="todo-item" v-for="todo in todos" :key="todo.id">
                  <el-checkbox v-model="todo.completed" />
                  <div class="todo-content">
                    <div class="todo-title">{{ todo.title }}</div>
                    <div class="todo-time">{{ todo.time }}</div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  Grid, Folder, Document, User, Menu, CircleCheck, UserFilled, ShoppingCart,
  Files, Setting, Edit, Notebook, QuestionFilled, Search, FullScreen,
  Bell, TrendCharts, Mouse
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const activeMenu = ref('dashboard')
const searchText = ref('')

// 用户数据
const users = ref([
  {
    id: 1,
    name: '中小鱼',
    location: '北京',
    gender: '女',
    age: 22,
    progress: 60,
    progressColor: '#409eff',
    avatar: 'https://avatars.githubusercontent.com/u/1?v=4'
  },
  {
    id: 2,
    name: '何小何',
    location: '深圳',
    gender: '男',
    age: 21,
    progress: 20,
    progressColor: '#909399',
    avatar: 'https://avatars.githubusercontent.com/u/2?v=4'
  },
  {
    id: 3,
    name: '萍萍姿',
    location: '上海',
    gender: '男',
    age: 23,
    progress: 60,
    progressColor: '#67c23a',
    avatar: 'https://avatars.githubusercontent.com/u/3?v=4'
  },
  {
    id: 4,
    name: '吴京萱',
    location: '长沙',
    gender: '女',
    age: 28,
    progress: 50,
    progressColor: '#e6a23c',
    avatar: 'https://avatars.githubusercontent.com/u/4?v=4'
  }
])

// 动态数据
const activities = ref([
  {
    id: 1,
    user: '中小鱼',
    action: '关注了',
    target: '程序员',
    time: ''
  },
  {
    id: 2,
    user: '何小何',
    action: '发表文章',
    target: 'Vue3 + TypeScript + Vite 项目搭建指南',
    time: ''
  },
  {
    id: 3,
    user: '萍萍姿',
    action: '提出问题',
    target: '主观性节点配置参数',
    time: ''
  },
  {
    id: 4,
    user: '吴京萱',
    action: '分享了产品',
    target: '《春时介个一个》',
    time: ''
  }
])

// 待办事项数据
const todos = ref([
  {
    id: 1,
    title: '查看今天的工作内容',
    time: '上午 09:30',
    completed: true
  },
  {
    id: 2,
    title: '回复邮件',
    time: '上午 10:30',
    completed: true
  },
  {
    id: 3,
    title: '工作任务整理',
    time: '上午 11:00',
    completed: true
  },
  {
    id: 4,
    title: '产品需求整理',
    time: '下午 02:00',
    completed: false
  }
])

// 图表实例
const barChart = ref(null)
const lineChart = ref(null)

onMounted(() => {
  initBarChart()
  initLineChart()
})

// 初始化柱状图
const initBarChart = () => {
  const chart = echarts.init(barChart.value)
  
  const option = {
    color: ['#409eff'],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      data: [150, 120, 180, 90, 200, 110, 180, 140, 190],
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        borderRadius: [4, 4, 0, 0]
      }
    }]
  }
  
  chart.setOption(option)
}

// 初始化折线图
const initLineChart = () => {
  const chart = echarts.init(lineChart.value)
  
  const option = {
    color: ['#409eff'],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      data: [80, 50, 300, 200, 500, 200, 150, 300, 150],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      areaStyle: {
        opacity: 0.1
      }
    }]
  }
  
  chart.setOption(option)
}
</script>

<style scoped>
.admin-layout {
  height: 100vh;
  width: 100vw;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #001529;
  width: 240px !important;
  min-width: 240px;
  max-width: 240px;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #1d1d1d;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.logo-icon {
  font-size: 24px;
  margin-right: 8px;
}

.sidebar-menu {
  border: none;
}

.menu-item-active {
  background-color: #1890ff !important;
}

/* 顶部导航样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: white;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.header-left {
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  width: 240px;
}

/* 主内容区样式 */
.main-content {
  background-color: #f0f2f5;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.stats-row {
  margin-bottom: 20px;
  width: 100%;
}

.chart-row {
  margin-bottom: 20px;
  width: 100%;
}

.bottom-row {
  margin-bottom: 20px;
  width: 100%;
}

/* 确保卡片不会超出容器 */
.stat-card,
.chart-card,
.bottom-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .stats-row .el-col {
    margin-bottom: 16px;
  }
  
  .chart-row .el-col {
    margin-bottom: 16px;
  }
  
  .bottom-row .el-col {
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 10px !important;
  }
  
  .stats-row,
  .chart-row,
  .bottom-row {
    margin-bottom: 10px;
  }
  
  .stats-row .el-col,
  .chart-row .el-col,
  .bottom-row .el-col {
    margin-bottom: 10px;
  }
  
  .header-right .search-input {
    width: 120px;
  }
  
  .header-right {
    gap: 6px;
  }
  
  .stat-value {
    font-size: 24px !important;
  }
  
  .chart {
    height: 250px !important;
  }
  
  .bottom-card {
    height: auto !important;
  }
}

@media (max-width: 576px) {
  .header-right .search-input {
    display: none;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
  }
  
  .stat-icon {
    margin-top: 8px;
  }
}

.stat-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
}

.stat-trend.positive {
  color: #52c41a;
}

.stat-trend.negative {
  color: #ff4d4f;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.blue { background: #1890ff; }
.stat-icon.cyan { background: #13c2c2; }
.stat-icon.red { background: #ff4d4f; }
.stat-icon.purple { background: #722ed1; }

/* 图表区域样式 */
.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-header {
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 16px;
  margin: 0 0 4px 0;
  color: #333;
}

.chart-subtitle {
  font-size: 14px;
  color: #666;
}

.chart-subtitle .positive {
  color: #52c41a;
}

.chart-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.stat-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 底部区域样式 */
.bottom-row {
  margin-bottom: 20px;
}

.bottom-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.card-subtitle, .activity-count, .todo-count {
  font-size: 14px;
  color: #666;
}

.count {
  color: #1890ff;
}

.positive {
  color: #52c41a;
}

/* 新用户列表样式 */
.new-users-section {
  margin-bottom: 20px;
}

.time-filter {
  margin-bottom: 20px;
}

.user-list {
  max-height: 280px;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.user-item:last-child {
  border-bottom: none;
}

.user-info {
  flex: 1;
  margin-left: 12px;
}

.user-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.user-location {
  font-size: 12px;
  color: #666;
}

.user-stats {
  display: flex;
  gap: 8px;
  margin-right: 12px;
}

.user-gender, .user-age {
  font-size: 12px;
  color: #666;
}

.user-progress {
  width: 80px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 30px;
}

/* 动态列表样式 */
.activity-list {
  max-height: 320px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.activity-user {
  color: #1890ff;
  font-weight: 500;
}

.activity-action {
  color: #333;
  margin: 0 4px;
}

.activity-target {
  color: #1890ff;
}

.activity-time {
  font-size: 12px;
  color: #666;
  margin-left: 12px;
}

/* 待办事项样式 */
.todo-list {
  max-height: 320px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-content {
  flex: 1;
  margin-left: 12px;
}

.todo-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.todo-time {
  font-size: 12px;
  color: #666;
}
</style>
